<template>
    <button :type="buttonType" class="bi-button" :class="btnClass" :disabled="disabled || loading">
        <bi-icon class="bi-button-icon" v-if="icon || loading" :data="loading? 'fa fa-spinner fa-spin' : icon" ></bi-icon>
        <div class="bi-button-title"><slot name="default"></slot></div>
    </button>
</template>

<script>
import BiIcon from 'icon.vue';
export default{
    components:{
        BiIcon
    },
    props:{
        type:{
            type:String,
            default:'secondary'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        size:{
            type:String,
            default:'normal'
        },
        outline:{
            type:Boolean,
            default:false
        },
        icon:{
            type:String,
            default:''
        },
        loading:{
            type:Boolean,
            default:false
        },
        submit:{
            type:Boolean,
            default:false
        },
    },
    computed:{
        btnClass(){
            let classList = [];
            classList.push('btn');
           
            switch(this.size){
                case'small':
                    classList.push('btn-xs');
                    break;
                case 'big':
                //    classList.push('btn-lg');
                break;
                default:
                classList.push('btn-sm');
                break;
            }

            if (this.outline){
                classList.push('btn-outline-'+this.type);
            }else{
                classList.push('btn-'+this.type);
            }
            return classList;
        },
        buttonType(){
            if (this.submit){
                return 'submit';
            }else{
                return 'button';
            }
        }
    }
}
</script>


<style>
.btn-xs{
    --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;
}
.bi-button{
    display: flex;
    align-items: center;
    justify-content: center;
}
.bi-button-icon + .bi-button-title{
    margin-left:.25rem;
}

</style>